<template>
	<view class="container">

		<tui-list-view title="" class="tui-list-view">
			<tui-list-cell @click="goDetailPage('user_info')" class="tui-msg">
				<view class="tui-msg-box">
					<image :src="userInfo.thumb" class="tui-msg-pic" mode="widthFix"></image>
					<view class="tui-msg-item">
						<view class="tui-msg-name">{{userInfo.title}}</view>
						<view class="tui-msg-content">{{userInfo.note}}</view>
					</view>
				</view>
				<view class="tui-msg-right">
					<tui-icon name="arrowright" :size="26" color="#bbb" style="line-height:48px;"></tui-icon>
				</view>
			</tui-list-cell>
		</tui-list-view>


		<tui-list-view>
			
			<tui-list-cell :arrow="true" @click="clearAllDialogue">
				清空所有会话及会话消息
			</tui-list-cell>
		</tui-list-view>

		<tui-list-view>
			<tui-list-cell :arrow="true" @click="aboutMe">
				关于我们
			</tui-list-cell>
			<tui-list-cell :arrow="true" @click="reply">
				意见反馈
			</tui-list-cell>
		</tui-list-view>

		<tui-list-view>
			<tui-list-cell :arrow="false" @click="loginOut">
				<div style="width:100%; text-align: center;">退出登录</div>
			</tui-list-cell>
		</tui-list-view>


		<!-- <uni-list>
			<uni-list-item title="thor-test" note="thor-test"  @click="goDetailPage('test')" />
		</uni-list> -->

	</view>
</template>


<script>
	import {
		user,
		PushMsg,
		tools
	} from '@/common/framework';

	export default {
		data() {
			return {
				pushMsg:{},
				isLogin: false,
				subName: '折叠列表',
				userInfo: {
					title: '用户名',
					note: '点击登录',
					thumb: 'https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png',
					url: 'user_info'
				},

			};
		},
		onLoad:function(){
			this.initUserInfo();
			uni.$on('reloadUser', () => {
				this.initUserInfo();
			})
			this.pushMsg = PushMsg.init();
			
		},
		computed: {
			getUserInfo() {
				return this.$store.getters.getUserInfo;
			}
		},
		
		methods: {
			loginOut() {
				user.clearUserInfo();
				this.pushMsg.removeAlias();
				uni.reLaunch({
					url: '/pages/user/login/login'
				})
			},
			clearAllDialogue() {
				this.pushMsg.clearAllDialogue().then((ret)=>{
					tools.toast('清空成功');
					uni.$emit('clearMessagesUnreadStatus', {});
				}).catch(err=>{
					console.log(err);
					tools.toast('清空失败');
				})
			},
			
			
			initUserInfo() {
				let userInfo = this.getUserInfo; //user.getUserInfo();
				console.log(userInfo);
				if (userInfo) {
					this.isLogin = true;
					
					this.userInfo.title = userInfo.userName;
					this.userInfo.note = "点击修改资料";
					if (userInfo.headerImg) {
						this.userInfo.thumb = userInfo.headerImg;
					}

				}
			},
			goDetailPage(path) {
				if (!path) return;
				if (this.navigateFlag) {
					return;
				}
				this.navigateFlag = true;
				uni.navigateTo({
					url: '/pages/user/' + path + '/' + path
				});
				setTimeout(() => {
					this.navigateFlag = false;
				}, 200)
			},
			aboutMe(){},
			reply(){}
		}
	}
</script>

<style lang="scss" scope>
.container{
	
	.btn {
		margin: 0 auto;
		width: 60%;
	}

	.jiange {
		border: 0.5px solid #ccc;
		background-color: #ddd;
		height: 1vh;

	}

	.pad10 {
		padding: 10px;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		display: block;
		margin-right: 24upx;
	}

	.tui-msg-item {
		max-width: 500upx;
		min-height: 80upx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34upx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26upx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120upx;
		height: 88upx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-msg-right.tui-right-dot {
		height: 76upx;
		padding-bottom: 10upx;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24upx;
		line-height: 24upx;
		color: #9397a4;
	}
}
</style>
